<template>
  <div class="accessories" v-show="AccessoriesVisible" @mouseover="showAccessories" @mouseleave="hideAccessories">
    <div class="accessories-list">
      <div class="accessories-list-title" >
        <ul>
          <li v-for="(itme, index) in AccessoriesData" :key="index">
            <a href="#" style="font-size: 10px">{{itme.title}}</a>
          </li>

        </ul>
      </div>

      <div class="accessories-product-list">
        <ul>
          <li v-for="(itme, index) in AccessoriesData" :key="index">
            <div>
              <a><img :src="itme.src1"></a>
              <a><img :src="itme.src2"></a>
              <a><img :src="itme.src3"></a>
              <a><img :src="itme.src4"></a>
              <a><img :src="itme.src5"></a>
              <a><img :src="itme.src6"></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import { ref, toRefs,reactive,onMounted } from 'vue';
import axios from 'axios'
import {useModelWrapper} from "@/components/use-model-wrapper.js";

  export default {
    name: "Accessories",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      editData: {
        type: Object,
      },
    },

    setup(props, {emit}){
      const AccessoriesVisible = useModelWrapper(props, emit, 'visible')
      const {editData,visible} = toRefs(props)
      const data = reactive({
        AccessoriesData: [],
        content: ref(null),
        contents: ref(null)
      })


      const getAccessories = async () =>{
        const response = await axios.get(
            '/api/getAccessories/',
            {
              headers: {
                "Content-Type": "application/json;charset=utf-8",
                'X-Requested-With': 'XMLHttpRequest',
                'Access-Control-Allow-Origin': '*'
              }
            }
        )
        data.AccessoriesData = response.data.title
      }


      const showAccessories = () => {
        AccessoriesVisible.value = true;
        emit('closeTime', AccessoriesVisible.value)
      }

      const hideAccessories = () => {
        AccessoriesVisible.value = false;
      };

      onMounted(() => {
        getAccessories()
      })


      return{
        ...toRefs(data),
        getAccessories,
        showAccessories,
        hideAccessories,
        AccessoriesVisible,
        editData,
        visible,
      }
    }
  }
</script>


<style scoped>
  .accessories {
    position: fixed;
    width: 1887px;
    height: 300px;
    z-index: 999;
    top: 80px;
    left: -7px;
    padding: 0;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
    margin-left: 15px;
  }

  .accessories-list-title {
    padding: 0 18.6875vw;
  }

  .accessories-list-title ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 50px;
  }
  .accessories-list-title li {
    list-style: none;
  }

  .accessories-list-title li a {
    text-decoration: none;
    color: black;
    font-weight: 200;
  }

  .accessories-product-list {
    width: 100%;
    height: auto;
  }
  .accessories-product-list ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .accessories-product-list ul li:nth-child(6),
  .accessories-product-list ul li:nth-child(2),
  .accessories-product-list ul li:nth-child(3),
  .accessories-product-list ul li:nth-child(4),
  .accessories-product-list ul li:nth-child(5){
    display: none;
  }

  .accessories-product-list ul li {
    list-style: none;
  }

  .accessories-product-list ul li a {
    height: 100%;
    width: auto;
  }

  .accessories-product-list li img {
    height: 140px;
    margin-right: 60px;
    margin-top: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  }
</style>